<!--
 * @Author: zixin 
 * @Date: 2025-04-16 15:55:36
 * @LastEditors: zixin 
 * @LastEditTime: 2025-04-16 15:55:41
 * @FilePath: \shuttle-bus-app\pages\components\BusItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="bus-item">
      <div class="title">
        {{ title }}
        <span class="distance">{{ time }} {{ distance }}</span>
      </div>
      
      <div class="bus-info">
        <div class="bus-number">{{ busNumber }}号巴士</div>
        <div class="next-stop" v-if="nextStop">{{ nextStop }}</div>
        <div class="stops" v-if="stops">{{ stops }}</div>
        <div class="star" v-if="hasStar">★</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      title: String,
      distance: String,
      time: String,
      busNumber: String,
      nextStop: String,
      stops: String,
      hasStar: Boolean
    }
  }
  </script>
  
  <style scoped>
  .bus-item {
    padding: 15px;
    margin-bottom: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .title {
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  
  .distance {
    color: #999;
    font-size: 14px;
  }
  
  .bus-info {
    display: flex;
    align-items: center;
  }
  
  .bus-number {
    font-weight: bold;
    margin-right: 10px;
  }
  
  .next-stop {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
  }
  
  .stops {
    font-size: 14px;
    color: #999;
    flex: 1;
  }
  
  .star {
    color: gold;
    font-size: 18px;
  }
  </style>